<template>
  <view class="box">
    <uv-navbar placeholder title="用户信息" bgColor="transparent" :autoBack="true"></uv-navbar>
    <view class="flex-col justify-cen aling-ali m-t-48">
      <button open-type="chooseAvatar" hover-class="none" @chooseavatar="chooseavatar">
        <uv-avatar :src="userInfo.avatar" size="186rpx"></uv-avatar>
      </button>
      <view class="font-28 m-t-24">点击更换头像</view>
    </view>
    <view class="form m-x-40 m-t-80">
      <uv-form :model="userInfo" ref="form" :rules="rules" :labelStyle="userInfo">
        <uv-form-item label="姓名:" prop="nickname" borderBottom :customStyle="formData.customStyle2">
          <view class="m-l-auto" style="width: 250rpx">
            <uv-input color="#7B8282" type="nickname" v-model="userInfo.nickname" placeholder="请输入姓名" border="none"
              :placeholderStyle="formData.placeholderStyle" customStyle="text-align: right;" suffixIcon="arrow-right"
              suffixIconStyle="color: #909399" />
          </view>
        </uv-form-item>
        <uv-form-item label="性别:" prop="sex" borderBottom :customStyle="formData.customStyle2">
          <view class="m-l-auto" style="width: 200rpx">
            <uv-radio-group v-model="userInfo.sex" placement="row">
              <uv-radio :name="1" activeColor="#1E1E1E" label="男"></uv-radio>
              <uv-radio class="m-l-40" :name="2" activeColor="#1E1E1E" label="女"></uv-radio>
            </uv-radio-group>
          </view>
        </uv-form-item>
        <uv-form-item label="生日:" prop="birthday" borderBottom :customStyle="formData.customStyle2">
          <view class="m-l-auto" style="width: 250rpx" @click="datetimePicker.open()">
            <uv-input color="#7B8282" v-model="userInfo.birthday" disabled disabledColor="#FFF" placeholder="请选择生日"
              border="none" :placeholderStyle="formData.placeholderStyle" suffixIcon="arrow-right"
              suffixIconStyle="color: #909399" />
          </view>
        </uv-form-item>
      </uv-form>
    </view>
    <view class="m-x-40 fixed-bottom-50">
      <dy-button width="100%" @click="submit">保存</dy-button>
      <view class="m-t-46">
        <dy-button width="100%" btn_bg="#EBEBEB" f_color="#333" @click="getLogout">退出登录</dy-button>
      </view>
    </view>



    <!-- <view class="submit m-t-40 longin" @click="getLogout"> 退出登录 </view> -->

    <!-- 年月日弹窗 -->
    <uv-datetime-picker :minDate="32803200000" ref="datetimePicker" confirmColor="#840202" v-model="formData.value"
      mode="date" @confirm="getConfirm">
    </uv-datetime-picker>
  </view>
</template>

<script setup>
import { userDetail, perfectInfo, logout } from '@/api/api';
import { LoginCenterApi } from '@/api/serves';
import { ref, onMounted, reactive, getCurrentInstance } from 'vue';
import { useStore } from 'vuex';
import { onReachBottom, onShow, onReady } from '@dcloudio/uni-app';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';
import store from '@/store';
import {
  os,
  sys,
  timeFormat,
} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
const { proxy } = getCurrentInstance();

const form = ref(null);
const rules = ref({
  nickname: {
    type: 'string',
    required: true,
    message: '请输入姓名',
    trigger: ['blur', 'change'],
  },
  sex: {
    type: 'number',
    required: true,
    message: '请选择性别',
    trigger: ['blur', 'change'],
  },
  birthday: {
    type: 'string',
    required: true,
    message: '请选择生日',
    trigger: ['blur', 'change'],
  },
});
const formData = reactive({
  customStyle: {
    'font-size': '34rpx',
    color: '#666666',
  },
  customStyle2: {
    'font-size': '50rpx',
    padding: '10rpx 0',
    display: 'flex',
    'justify-content': 'flex-end',
    height: '105rpx',
  },
  placeholderStyle: {
    'font-size': '28rpx',
    color: '#7B8282',
    'text-align': 'right',
  },
  value: Number(new Date()),
});
const userInfo = ref({
  avatar: '',
  nickname: '',
  sex: '',
  birthday: '',
});
const datetimePicker = ref(null);
//生日选择
const getConfirm = ({ value, mode }) => {
  console.log(value, '生日选择');
  userInfo.value.birthday = timeFormat(value);
};
//获取用户信息
const getUserInfo = () => {
  userDetail().then((res) => {
    console.log(res, '用户信息');
    userInfo.value = res.data;
    store.commit('setUserInfo', res.data);
    proxy.$tool.storage('userInfo', res.data);
  });
};
//选择头像
const chooseavatar = (e) => {
  console.log(e.detail.avatarUrl, '头像');
  LoginCenterApi.uploadImg({
    filePath: e.detail.avatarUrl, // 要上传文件资源的路径。
    name: 'file' // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
  }).then((res) => {
    console.log(res, '头像');
    userInfo.value.avatar = res.data.src;
  })
};
//保存
const submit = () => {
  if (!userInfo.value.avatar) {
    uni.showToast({
      icon: 'error',
      title: '请选择头像',
    });
    return;
  }
  form.value
    .validate()
    .then((res) => {
      userInfo.value.nickName = userInfo.value.nickname;
      perfectInfo(userInfo.value).then((res) => {
        console.log(res, '保存');
        getUserInfo();
        if (res.code == 1) {
          uni.showToast({
            icon: 'success',
            title: '保存成功',
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        } else {
          uni.showToast({
            icon: 'error',
            title: res.msg,
          });
        }
      });
    })
    .catch((errors) => {
      console.log(errors);
      uni.showToast({
        icon: 'none',
        title: errors[0].message,
      });
    });
};
//退出登录
const getLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定退出登录吗？',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定');
        logout().then((res) => {
          console.log(res, '退出登录');
          uni.clearStorageSync();
          store.commit('setUserInfo', {});
          uni.reLaunch({
            url: '/pages/index/index',
          });
        });
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    },
  });
};
onShow(() => {
  getUserInfo();
});
</script>

<style lang="scss" scoped>
::v-deep .uv-input__content__field-wrapper__field {
  text-align: right !important;
}

::v-deep .uv-form-item__body__right__message {
  text-align: right;
  display: inline-block;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 45px;
}

.box {
  min-height: 100vh;

  .form {
    // height: 315rpx;
    background: #fff;
  }

  .longin {
    background: #ebebeb;
    font-weight: normal;
    color: #333333;
    position: fixed;
    bottom: 80rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
